<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--准备好一个"容器"-->

    <div id="test"></div>
    <br/><br/><br/>
    <div id="test2"></div>

    <!--引入库-->
    <script type="text/javascript" src="../new_js/react.development.js"></script>
    <script type="text/javascript" src="../new_js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">





        class Count extends React.Component {

            constructor(props) {
                super(props);
                console.log("Count-Constructor，构造器");

                this.state = {
                    count: 0
                }
            }



            add = () => {
                const { count } = this.state;

                this.setState({ count: count + 1 });
            }


            unmount = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            }


            force = () => {
                this.forceUpdate();
            }

            //组件将要挂载
            UNSAFE_componentWillMount() {
                console.log("Count-ComponentWillMount，组件将要挂载");
            }

            //组件挂载完毕
            componentDidMount() {
                console.log("Count-ComponentDidMount，组件挂载完毕");
            }

            //组件即将卸载
            componentWillUnmount() {
                console.log("Count-ComponentWillUnmount，组件即将卸载");
            }

            //组件是否应该被更新
            shouldComponentUpdate() {
                console.log("Count-ShouldComponentUpdate，组件是否应该被更新");
                return true;
            }

            //组件将要更新
            UNSAFE_componentWillUpdate() {
                console.log("Count-omponentWillUpdate，组件将要更新");
            }

            render() {
                console.log("Count-Render，组件渲染");
                const { count } = this.state;
                return (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.unmount}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                );
            }
        }



        class A extends React.Component {
            state = {
                name: '烟烟罗'
            }


            changeShikigami = () => {
                this.setState({ name: '铃鹿御前' });
            }

            render() {
                return (
                    <div>A组件
                        <button onClick={this.changeShikigami}>换式神</button>
                        <B name={this.state.name} /></div>);
            }
        }


        class B extends React.Component {



            //组件将要挂载
            UNSAFE_componentWillMount() {
                console.log("*******************B-ComponentWillMount，组件将要挂载*******************");
            }

            //组件将要接受属性(第一次传的不算)
            UNSAFE_componentWillReceiveProps(props) {
                console.log("*******************B-ComponentWillReceiveProps，组件将要接受属性*******************",props);
            }


            render() {
                return (
                    <div>B组件,展示式神:{this.props.name}</div>);
            }
        }


        //2.渲染虚拟DOM到页面
        ReactDOM.render(<A />, document.getElementById('test'));
        ReactDOM.render(<Count/>, document.getElementById('test2'));
    </script>

</body>

</html>